<template>
  <view v-if="goodsList">
    <Search-Bar></Search-Bar>

    <view>
      <uni-segmented-control
        :current="current"
        :values="items"
        @clickItem="onClickItem"
        style-type="text"
        active-color="#eb4450"
      ></uni-segmented-control>
      <view class="content">
        <view v-if="current === 0">
          <navigator
            class="goods"
            v-for="item in goodsList"
            :key="item.goods_id"
            :url="'/pages/goods-detail/index?id=' + item.goods_id"
          >
            <!-- 左图片 -->
            <view class="goods-img">
              <image
                :src="
                  item.goods_big_logo ||
                  'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2453368590,3077318655&fm=26&gp=0.jpg'
                "
                mode="widthFix"
              ></image>
            </view>
            <!-- 右文本 -->
            <view class="goods-content">
              <view class="goods-name">{{ item.goods_name }} </view>
              <view class="goods-price">￥{{ item.goods_price }} </view>
            </view>
          </navigator>
        </view>
        <view v-if="current === 1">
          选项卡2的内容
        </view>
        <view v-if="current === 2">
          选项卡3的内容
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui";
import SearchBar from "@/components/SearchBar";

export default {
  components: { uniSegmentedControl, SearchBar },
  data() {
    return {
      items: ["综合", "销量", "价格"],
      current: 0,
      // 返回的数据
      goodsList: [],
      // 最多总页数
      mostPagenum: null,
      // 请求的参数
      data: {
        // 关键词
        query: "",
        // 页数
        pagenum: 1,
        // 每页多少条数据
        pagesize: 10,
        // id
        cid: "",
      },
    };
  },

  async onLoad(options) {
    wx.showToast({
      title: "加载中",
      mask: true,
      icon: "none",
    });
    // url传过来页面参数,可以由onLoad(参数),中的参数来获取.
    this.data.cid = options.id || 13;
    await this.goodsLoad();

    wx.hideToast({
      complete: (res) => {},
    });
  },

  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    // 用promise 请求获取商品列表
    async goodsLoad(isReflesh = false) {
      const res = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/goods/search",
        data: this.data,
      });
      console.log(res);
      // this.goodslist = res[1].data.message.goods;

      if (isReflesh) {
        // 优化1.2清空数据
        this.goodsList = res[1].data.message.goods;
      } else {
        // 拼接数据,拉到底更新下一页面
        this.goodsList = [...this.goodsList, ...res[1].data.message.goods];
      }

      // 计算最多总页数,拉到底onReachBottom会用
      this.mostPagenum = Math.ceil(
        res[1].data.message.total / this.data.pagesize
      );

      return Promise.resolve();
    },

    //上拉到底请求下一页数据回来拼接
    onReachBottom() {
      console.log("拉到底了");
      if (this.mostPagenum <= this.data.pagenum) {
        uni.showToast({
          title: "没有下一页了",
          // success 才是默认值
          icon: "none",
        });
      } else {
        // 页面加+
        this.data.pagenum++;
        this.goodsLoad();
      }
    },
    // 下拉刷新页面
    async onPullDownRefresh() {
      uni.showToast({
        title: "刷新成功",
        icon: "none",
      });
      // 优化1.1 下拉刷新页面把拼接的数据变为一页,清空数据,使请求数据长度变回10
      this.data.pagenum = 1;
      await this.goodsLoad(true);

      uni.stopPullDownRefresh();
    },
  },
};
</script>

<style lang="scss">
.goods {
  display: flex;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #ddd;
  .goods-img {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 80%;
    }
  }
  .goods-content {
    flex: 2;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    .goods-name {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
    }
    .goods-price {
      font-size: 32rpx;
      color: $theme-color;
    }
  }
}
</style>